import React from 'react';
import { CartItemProps } from '../../types';
import styled from './index.module.css';
import { Checkbox, InputNumber } from 'antd';
import { CheckboxChangeEvent } from 'antd/es/checkbox';

export default function CartItem({
    cart,
    changeNum,
    selectItem,
    showSelect = true,
}: CartItemProps) {
    const chanNum = (value: number | null) => {
        if (value !== null) {
            changeNum && changeNum(cart.id, value);
        }
    };
    const isSelect = (e: CheckboxChangeEvent) => {
        selectItem && selectItem(cart.id, e.target.checked);
    };
    return (
        <div className={styled.cartItem}>
            <div className={styled.checkbox}>
                {showSelect && <Checkbox checked={cart.is_select} onChange={isSelect}></Checkbox>}
            </div>
            <div className={styled.img}>
                <img src={'https://' + cart.good.media?.file} alt="" />
            </div>
            <div className={styled.name}>
                <a href={`/goods/detail/${cart.good.id}`} target="_blank" rel="noreferrer">
                    {cart.good.name}
                </a>
            </div>
            <div className={styled.prop}></div>

            <div className={styled.price}>
                <div className={styled.oldPrice}>${cart.good.oldPrice?.toFixed(2)}</div>
                <div className={styled.price}>${cart.good.price.toFixed(2)}</div>
            </div>
            <div className={styled.num}>
                <InputNumber
                    disabled={!showSelect}
                    size="small"
                    min={1}
                    max={100000}
                    defaultValue={cart.num}
                    onChange={chanNum}
                />
            </div>
            <div className={styled.realPrice}>${(cart.good.price * cart.num).toFixed(2)}</div>
            <div className={styled.operate}>{showSelect && <span>删除</span>}</div>
        </div>
    );
}
